import { SettingOutlined, LogoutOutlined } from "@ant-design/icons";
import { Dropdown, Menu, Space } from "antd";
import React from "react";
import { connect } from "react-redux";
import { loginFail } from "@/action/index";

const DropMenu = (props) => {
  const handleMenuClick = ({ key }) => {
    if (key === "2") {
      props.loginFail()
    }
  };

  const menu = (
    <Menu
      onClick={handleMenuClick}
      items={[
        {
          label: "个人设置",
          key: "1",
          icon: <SettingOutlined />,
        },
        {
          label: "退出登录",
          key: "2",
          icon: <LogoutOutlined />,
        },
      ]}
    />
  );
  return (
    <Space wrap style={{marginRight:'20px'}}>
      <Dropdown.Button overlay={menu}>
        {props.user.userInfo.username}
      </Dropdown.Button>
    </Space>
  );
};

export default connect(({ user }) => ({ user }), { loginFail })(DropMenu);
